<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../../../../css/aui.css" />
    <script src='../../../../CommonTool/commonNetWork.js'></script>
    <script src="../../../../script/jquery.js"></script>
    <script src="../SituationalCoping.js"></script>
</head>
<style>
.ImgStyleOne {
    min-width: 70%;
    max-width: 70%;
    margin: 0 auto;
    height: 45vw;
}
.downBody {
    margin-top: 1%;
}

</style>
<body>
    <header class="aui-bar aui-bar-nav" id="aui-header">
        <div class="aui-pull-left aui-btn" onclick="close_winMain();">
            <span class="aui-iconfont aui-icon-left"></span>返回
        </div>
        <div class="aui-title">场景-高级-情境情绪应对</div>
    </header>
        <div class="aui-grid downBody" >
            <div class="aui-row">
                <div class="aui-col-xs-2"></div>
                <div class="aui-col-xs-8">
                    <div class="ImgStyleOne">
                        <img src="http://172.16.32.194/social/advanced/情境情绪应对/1/1.png" id="imgOne" alt="">
                    </div>
                </div>
            </div>
        </div>
            <div  class="footbar" >
                <p class="barLeft" onclick="toggleMenu()">第一关</p>
                <p class="barCenter">
                    <div id="InitialButton" style="float:left;margin-left:4%;" onclick="InitialClick()">
                        <img id="passImg" src="http://172.16.32.194/commonButton/加号.png" alt="">
                    </div> 
                        <div id="InitialButton1" style="float:left;margin-left:4%;display: none;" onclick="ShowInitialClick()">
                            <img id="passImg" src="http://172.16.32.194/commonButton/减号.png" alt="">
                        </div> 
                        <div id="InitialButton2" style="float:left; margin-left:3%;display: none;" >
                            <img style="width: 2rem;height: 1.6rem;margin-top:12%" src="http://172.16.32.194/commonButton/播放2.png" alt="" onclick="ImgAudioClick()">
                        </div> 
                        <div id="InitialButton4" style="float:left;margin-left:4%;display: none;">
                            <img style="width: 2rem;height:2rem;margin-top:6%" src="http://172.16.32.194/commonButton/刷新1.png" alt=""  onclick="ResetClick()">
                        </div> 
                     </p>
                     <p class="barright">
                        <img  src="http://172.16.32.194/commonButton/回答问题.png" alt=""  class="BarBottom" onclick="go_forward('RecognitionTwo');">
    </div>
</div>
              <div class="menu" id="menu">
            <div class="menu-item" onclick="goto_page(1)">第一关</div>
            <div class="menu-item" onclick="goto_page(2)">第二关</div>
            <div class="menu-item" onclick="goto_page(3)">第三关</div>
            <div class="menu-item" onclick="goto_page(4)">第四关</div>
            <div class="menu-item" onclick="goto_page(5)">第五关</div>
            <div class="menu-item" onclick="goto_page(6)">第六关</div>
            <div class="menu-item" onclick="goto_page(7)">第七关</div>
            <div class="menu-item" onclick="goto_page(8)">第八关</div>
            <div class="menu-item" onclick="goto_page(9)">第九关</div>
            <div class="menu-item" onclick="goto_page(10)">第十关</div>

        </div>
</body>
</html>
<script>
        var token = "";
        var userid = "";
        var currentTimestamp = "";
        var operationName = "";
        var additionalInfo = "";
        var groupId = "";
        var scene = "场景";
        var sceneLevel = "高级";
        var courseType = "情境情绪应对";
        var classSort = "1";
        var moodType="害怕";
        var remarks = "故事";
        var classType = "学习";
        var currentAudio = null
        apiready = function() { 
        ImgAudioClick()
        token = api.pageParam.token
        userid = api.pageParam.uid
        groupId = api.pageParam.groupId
        currentTimestamp = Date.now()
        operationName = 'ing'
        additionalInfo = ''
            if (api.pageParam.groupId !== undefined) {
                groupId = api.pageParam.groupId;
            } else {
                InitializeCommonNetWork();
            }
        };
      function ImgAudioClick(){
        var audio1 = new Audio('http://172.16.32.194/social/advanced/情境情绪应对/1/1.mp3');
        audio1.play();
        currentAudio = audio1;
            audio1.addEventListener('ended', function () {
            var audio2 = new Audio('http://172.16.32.194/social/advanced/情境情绪应对/1/2.mp3');
            audio2.play();
            currentAudio = audio2;  
            document.getElementById('imgOne').src='http://172.16.32.194/social/advanced/情境情绪应对/1/2.png'
            audio2.addEventListener('ended', function () {
                var audio3 = new Audio('http://172.16.32.194/social/advanced/情境情绪应对/1/3.mp3');
                audio3.play();
                currentAudio = audio3;  
                document.getElementById('imgOne').src='http://172.16.32.194/social/advanced/情境情绪应对/1/3.png'
                audio3.addEventListener('ended', function () {
                    var audio4 = new Audio('http://172.16.32.194/social/advanced/情境情绪应对/1/4.mp3');
                    audio4.play();  
                    currentAudio = audio4;
                    document.getElementById('imgOne').src='http://172.16.32.194/social/advanced/情境情绪应对/1/4.png'
                    audio4.addEventListener('ended', function () {
                        
                    })
                }) 
            })
            });
    }
      function hideRight(){
        document.getElementById('backdrop_bgright').style.display='none'
         const gifImage = document.getElementById('faceStyle');
        gifImage.src = `${gifImage.src}?nocache=${new Date().getTime()}`; 
        history.go(0) 
      }
      function go_forward(data){
        if (currentAudio) {
                currentAudio.pause();
                currentAudio = null;
            }
        currentTimestamp = Date.now()
        operationName = 'end'
        additionalInfo = ''
        CommonNetWork()
          api.openWin({
              name: 'Probrem1',
              url:'./Probrem1.html',
              pageParam: {
                    uid: userid,
                    token:token,
                    groupId:groupId
                },
              reload:true,
          })
      }
    function goto_page(number) {
        const pages = [
            "Material1",
            "Material2",
            "Material3",
            "Material4",
            "Material5",
            "Material6",
            "Material7",
            "Material8",
            "Material9",
            "Material10",
           
        ];
        var name = pages[number-1]
        var url = "../" + name + "/Story1.html"
        if (currentAudio) {
                currentAudio.pause();
                currentAudio = null;
            }
        currentTimestamp = Date.now();
        operationName = "end";
        additionalInfo = "";
        CommonNetWork();
        api.openWin({
            name: name,
            url: url,
            pageParam: {
                uid: userid,
                token: token,
                groupId: groupId,
            },
            reload: true,
        });
    }
    function toggleMenu() {
        var menu = document.getElementById("menu");
        if (menu.style.display === "none" || menu.style.display === "") {
            menu.style.display = "block";
        } else {
            menu.style.display = "none";
        }
    }
</script>